<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册 | 灵光显卡铺</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
<?php include_once 'header_non2floor.php'?>
<main style="margin-top: 45px" class="clearfix">
    <div class="container title">
        <p>灵光显卡铺</p>
        <p>欢迎注册</p>
    </div>
    <div class="container loginForm">
        <div class="regTitle">在注册时，我们需要仅仅如下信息...</div>
        <form action="" method="post">
            <input type="text" name="username" id="username" placeholder="您的用户名" required>
            <input type="password" name="password" id="password" placeholder="您的密码" required>
            <input type="password" name="rePassword" id="rePassword" placeholder="重复一遍您的密码" required>
            <input type="email" name="email" id="email" placeholder="您的电子邮箱" required>
            <input type="submit" value="注册">
        </form>
    </div>
    <div class="toReg container">
        <div class="regTitle"><p>如果您有账号...</p></div>
        <div class="regBtn">
            <button id="toLogin">登录</button>
        </div>
    </div>
</main>
<?php include_once 'loginLayout.php'?>
</body>
<script src="./js/tools.js"></script>
<script src="./js/header.js"></script>
<script>
    document.getElementById('toLogin').onclick = function(){
        window.location.href = 'login.php'
    }
</script>
<script src="./js/jquery-3.5.1.js"></script>
<script>
    let password = ''
    let rep = ''
    let canReg = false
    $('#password').blur(function (){
        password = $('#password').val()
        if(rep !== password || password === ''){
            console.log('canReg = false')
            canReg = false
        }else{
            console.log('canReg = true')
            canReg = true
        }
    })
    $('#rePassword').blur(function(){
        rep = $('#rePassword').val()
        console.log(password,rep)
        if(rep !== password || password === ''){
            alert('密码与重复密码需要一致')
            console.log('canReg = false')
            canReg = false
        }else{
            console.log('canReg = true')
            canReg = true
        }
    })
    $('#username').blur(function (){
        $.post('connect.php',{
            type: 'checkusername',
            username: $('#username').val()
        },function (data){
            if(data === '1'){
                alert('用户名已存在')
            }
        })
    })
    $(':submit').click(function(){
        if(!canReg){
            return false;
        }
        $.post('connect.php',{
            type: 'register',
            username: $('#username').val(),
            password: $('#password').val(),
            rePassword: $('#rePassword').val(),
            email: $('#email').val()
        },function(data){
            if(data === '0'){
                alert('注册失败')
            }else if(data === '1'){
                alert('注册成功')
            }else if(data === '2'){
                alert('密码与重复密码需要一致')
            }else if(data === '3'){
                alert('注册失败，已有用户名，请另选一个')
            }else if(data === '4'){
                alert('用户名不能为空...')
            }else{
                console.log(data)
            }
        })
        return false
    })
</script>
</html>